<template>
  <div class="course">
    <el-container class="course-container">
      <img
        class="course-container-img"
        src="@/assets/course/banner.jpg"
        alt=""
        @click="test"
      />

      <el-container>
        <el-main>
          <transition-group tag="ul" class="course-container-course">
            <li
              v-for="item in videoData"
              :key="item"
              class="course-container-course-item"
              @click="toDetial(item)"
            >
              <div>
                <img
                  class="course-container-course-item-img"
                  src="@/assets/course/cover.jpg"
                  alt=""
                />
              </div>
              <p class="course-container-course-item-p">{{ item.name }}</p>
            </li>
          </transition-group>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import GLOBAL from "@/api/global_var";
//import HelloWorld from '@/components/course/banner.vue'
export default {
  data() {
    return {
      videoData: [
        {
          name: "单片机原理及应用",
          url: "//player.bilibili.com/player.html?aid=20202482&bvid=BV1zW411s73i&cid=32986287&page=1",
        },
        {
          name: "数据结构",
          url: "//player.bilibili.com/player.html?aid=82837069&bvid=BV1nJ411V7bd&cid=141710539&page=1",
        },
        {
          name: "算法分析与设计",
          url: "//player.bilibili.com/player.html?aid=13316124&bvid=BV1Ex411H7QJ&cid=21827152&page=1",
        },
        {
          name: "C语言程序设计",
          url: "//player.bilibili.com/player.html?aid=17425239&bvid=BV1VW41187zq&cid=28463288&page=1",
        },
        {
          name: "人工智能",
          url: "//player.bilibili.com/player.html?aid=17963543&bvid=BV18W411B7og&cid=29326431&page=1",
        },
        {
          name: "机器学习",
          url: "//player.bilibili.com/player.html?aid=94519857&bvid=BV1JE411g7XF&cid=334327275&page=1",
        },
        {
          name: "大数据基础",
          url: "//player.bilibili.com/player.html?aid=70358352&bvid=BV1BJ411F7u8&cid=121866178&page=1",
        },
        {
          name: "计算机网络原理",
          url: "//player.bilibili.com/player.html?aid=202211689&bvid=BV1Qh411X7xr&cid=238414536&page=1",
        },
        {
          name: "数据结构",
          url: "//player.bilibili.com/player.html?aid=82837069&bvid=BV1nJ411V7bd&cid=141710539&page=1",
        },
        {
          name: "高级程序语言设计",
          url: "//player.bilibili.com/player.html?aid=33243887&bvid=BV1UW41127tw&cid=242366023&page=1",
        },
      ],
      itemData: [],
    };
  },
  mounted() {
    this.handleSelect(localStorage.getItem("key"));
    this.dkey = localStorage.getItem("key");
  },
  methods: {
    select(a) {
      console.log(a);
    },
    toDetial(res) {
      console.log(res);
      GLOBAL.History.unshift({
        name: res.name,
        url: res.url,
        cover:
          "http://i0.hdslb.com/bfs/archive/d7f0c41f1642a305f2f8ee7d73fd1e2901b465d4.jpg",
        date: GLOBAL.getDate(new Date()),
      });
      console.log(GLOBAL.History);
      this.$router.push({
        name: "2",
        params: {
          res: res,
        },
      });
    },
    handleSelect(key, keyPath) {
      localStorage.setItem("key", key);
      {
        this.itemData = this.videoData;
      }

      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped lang="scss">
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(100px);
  position: absolute;
  transition: all 0.6s ease;
}
.v-enter-active,
.v-move {
  transition: all 0.6s ease;
}
.course {
  height: 100%;
  width: 100%;
  &-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    &-course {
      &-item:hover {
        transform: translateY(-10px);
        box-shadow: 0px 10px 30px #888888;
      }
      &-item {
        list-style: none;
        float: left;
        width: 219px;
        height: 180px;
        margin-top: 30px;
        margin-left: 20px;
        transition: all 0.3s;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        border: 1px solid #dce6ee;
        &-img {
          display: inline-block;
          border: none;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        &-p {
          font-size: 16px;
          margin-top: 8px;
          width: 100%;
          height: 20px;
          text-indent: 0.5em;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    &-img {
      width: 100%;
      height: 200px;
    }
    &-main {
      padding: 0;

      &-box {
        width: 70%;
        margin-top: 20px;
        padding: 15px;
        background: #f3f3f5;
        p:hover {
          color: #488bfe;
        }
        &-p {
          cursor: pointer;
          float: left;
          padding-right: 25px;
          color: #488bfe !important;
        }
      }
    }
  }
}
</style>